<template>
  <div class="room">
    <div class="room-search">
      <div class="room-left" @click="left()">
        <van-icon name="arrow-left" color="#a8a6a6" />
      </div>
      <span>
        <p @click="city">
          {{arealist.label}}
          <van-icon name="arrow-down" />
        </p>
        <van-icon name="search" />
        <input type="text" placeholder="请输入小区或地址" />
      </span>
      <div class="room-map" @click="maps()">
        <i class="el-icon-map-location"></i>
        <!-- <van-icon name="user-circle-o" color="rgb(41, 175, 41)" /> -->
      </div>
    </div>
    <div class="room-menu">
      <van-dropdown-menu>
        <van-dropdown-item title="区域" ref="item">
          <van-picker
            value-key="label"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :default-index="1"
          />
          <div class="district">
            <button class="district1">取消</button>
            <button class="district2">确定</button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="item">
          <van-picker
            value-key="label"
            :columns="rentType"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :default-index="1"
          />
          <div class="district">
            <button class="district1">取消</button>
            <button class="district2">确定</button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="item">
          <van-picker
            value-key="label"
            :columns="price"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :default-index="1"
          />
          <div class="district">
            <button class="district1">取消</button>
            <button class="district2">确定</button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item
          title="筛选"
          ref="item"
          @open="
            () => {
              this.show = !this.show;
            }
          "
        >
          <van-popup
            v-model="show"
            position="right"
            get-container="body"
            :style="{ width:'70%', height: '100%' }"
          >
            <div class="screen">
              <div class="screen-one">
                <div class="screen-header">
                  <span>户型</span>
                </div>
                <div class="screen-body">
                  <ul>
                    <li
                      v-for="(item,index) in roomType"
                      :key="index"
                      @click="btnactive(index, item.value)"
                      ref="actioe"
                    >{{item.label}}</li>
                  </ul>
                </div>
              </div>
              <div class="screen-two">
                <div class="screen-header">
                  <span>朝向</span>
                </div>
                <div class="screen-body">
                  <ul>
                    <li
                      v-for="(item,index) in oriented"
                      :key="index"
                      @click="btnactive1(index, item.value)"
                      ref="active"
                    >{{item.label}}</li>
                  </ul>
                </div>
              </div>
              <div class="screen-three">
                <div class="screen-header">
                  <span>楼层</span>
                </div>
                <div class="screen-body">
                  <ul>
                    <li
                      v-for="(item,index) in floor"
                      :key="index"
                      @click="btnactive2(index, item.value)"
                      ref="activv"
                    >{{item.label}}</li>
                  </ul>
                </div>
              </div>
              <div class="screen-four">
                <div class="screen-header">
                  <span>房屋亮点</span>
                </div>
                <div class="screen-body">
                  <ul>
                    <li
                      v-for="(item,index) in characteristic"
                      :key="index"
                      @click="btnactive3(index, item.value)"
                      ref="activvv"
                    >{{item.label}}</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="screen-button">
              <button class="screenbutton1">清除</button>
              <button class="screenbutton2">确定</button>
            </div>
          </van-popup>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="room-main">
      <div v-for="(item,ind) in rooms" :key="ind" @click="detail(item)">
        <dl>
          <dt>
            <img :src="'http://47.102.145.189:8009'+item.houseImg" alt />
          </dt>
          <dd>
            <p class="titles">{{item.title}}</p>
            <p>{{item.desc}}</p>
            <p>{{item.tages}}</p>
            <span>{{item.price}}元</span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      show: false,
      value: "",
      list: [],
      showPicker: false,
      rentType: [],
      roomType: [],
      oriented: [],
      floor: [],
      characteristic: [],
      price: [],
      rooms: [],
      columns: [],
      subway: []
    };
  },
  computed: {
    ...mapState(["arealist"])
  },

  methods: {
    ...mapMutations(["serHis"]),
    detail(item) {
      this.$router.push({ path: "/detail", query: { id: item.houseCode } });
      this.serHis(item);
    },

    onConfirm() {
      this.$refs.item.toggle();
    },
    left() {
      this.$router.push("/home/first");
    },
    maps() {
      this.$router.push("/home/first/map");
    },
    city() {
      this.$router.push("/citylist");
    },
    async Romms() {
      console.log(this.arealist.value);
      let res = await this.$http.get(`/houses?cityId=${this.arealist.value}`);
      this.rooms = res.data.body.list;
    },

    onConfirm(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      console.log("取消");
    },

    sealist() {
      this.$http
        .get(`/houses/condition?id=${this.arealist.value}`)
        .then(res => {
          console.log(res);
          if (res.data.status === 200) {
            console.log(res.data.body.area);
            this.columns.push(res.data.body.area);
            this.columns.push(res.data.body.subway);
            this.rentType = res.data.body.rentType;
            this.roomType = res.data.body.roomType;
            this.oriented = res.data.body.oriented;
            this.floor = res.data.body.floor;
            this.characteristic = res.data.body.characteristic;
            this.price = res.data.body.price;
          }
        });
    },
    btnactive(index, value) {
      this.$refs.actioe[index].classList.toggle("active");
    },
    btnactive1(index, value) {
      this.$refs.active[index].classList.toggle("active");
    },
    btnactive2(index, value) {
      this.$refs.activv[index].classList.toggle("active");
    },
    btnactive3(index, value) {
      this.$refs.activvv[index].classList.toggle("active");
    }
  },
  created() {
    this.Romms();
    this.sealist();
  }
};
</script>

<style>
.active {
  background: #defaef;
  border: 1px solid #21b97a;
  color: #21b97a;
}
.room {
  width: 100%;
  height: auto;
  position: relative;
}
.room-search {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 2px;
  font-size: 15px;
}
.room-search p {
  padding-right: 10px;
  border-right: 1px solid #cccccc;
}
.room-search span {
  width: 100%;
  height: 35px;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-radius: 5px;
}
.room-search span i {
  padding-left: 10px;
}
.room-search span input {
  border: none;
  text-indent: 10px;
  font-size: 10px;
}
.room-search > i {
  font-size: 20px;
  padding: 0 8px;
}
.room-left i {
  display: flex;
  padding: 0 10px;
  font-size: 20px;
}
.room-map i {
  display: flex;
  padding: 0 10px;
  font-size: 25px;
  color: rgb(41, 175, 41);
}
.van-dropdown-menu__bar {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid #adadad;
}
.room-menu {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 999;
}
.room-main {
  width: 100%;
  height: auto;
  background: #ffffff;
}
.room-main dl {
  display: flex;
  padding: 20px 20px;
  /* margin: 20px 20px; */
}
.room-main dl dt img {
  width: 106px;
  height: 80px;
}
.room-main dl dd {
  padding-left: 20px;
  font-size: 14px;
}
.room-main dl dd p {
  padding-top: 5px;
}
.screen-one .screen-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 17px;
}
.screen-one .screen-body {
  width: 100%;
  height: 120px;
  padding: 0 10px;
}
.screen-one .screen-body ul {
  width: 100%;
  height: 109px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #dddddd;
}
.screen-one .screen-body ul li {
  width: 70px;
  height: 32px;
  border: 1px solid #cccccc;
  text-align: center;
  font-size: 10px;
  line-height: 32px;
  margin: 5px 5px;
  color: #888888;
}
.screen-two .screen-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 17px;
}
.screen-two .screen-body {
  width: 100%;
  height: 156px;
  padding: 0 10px;
}
.screen-two .screen-body ul {
  width: 100%;
  height: 156px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #dddddd;
}
.screen-two .screen-body ul li {
  width: 70px;
  height: 32px;
  border: 1px solid #cccccc;
  text-align: center;
  font-size: 10px;
  line-height: 32px;
  margin: 5px 5px;
  color: #888888;
}
.screen-three .screen-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 17px;
}
.screen-three .screen-body {
  width: 100%;
  height: 62px;
  padding: 0 10px;
}
.screen-three .screen-body ul {
  width: 100%;
  height: 62px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #dddddd;
}
.screen-three .screen-body ul li {
  width: 70px;
  height: 32px;
  border: 1px solid #cccccc;
  text-align: center;
  font-size: 10px;
  line-height: 32px;
  margin: 5px 5px;
  color: #888888;
}
.screen-four .screen-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 17px;
}
.screen-four .screen-body {
  width: 100%;
  height: 249px;
  padding: 0 10px;
}
.screen-four .screen-body ul {
  width: 100%;
  height: 249px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #dddddd;
}
.screen-four .screen-body ul li {
  width: 70px;
  height: 32px;
  border: 1px solid #cccccc;
  text-align: center;
  font-size: 10px;
  line-height: 32px;
  margin: 5px 5px;
  color: #888888;
}
.screen {
  height: 93%;
  overflow: scroll;
}
.screen-button {
  width: 100%;
  height: 50px;
  display: flex;
}
.screen-button .screenbutton1 {
  width: 98.33px;
  height: 50px;
  border: none;
  color: #21b97a;
  background: #ffffff;
}
.screen-button .screenbutton2 {
  width: 196.67px;
  height: 50px;
  border: none;
  background: #21b97a;
  color: #ffffff;
}

.van-dropdown-item .district1 {
  width: 138px;
  height: 50px;border: none;
  color: #21b97a;
  background: #f7f4f4;
}
.van-dropdown-item .district2 {
  width: 276px;
  height: 50px;
  border: none;
  background: #21b97a;
  color: #ffffff;
}
.screen-body ul li .active {
  background: #defaef;
}
</style>